<template>
	<view class="eat">
		<!-- <text class="eat-title">一日三餐</text> -->
		<view class="tar-top" @click="getTarget($event)">
			<text id="yday" :class="{active:index==1}">昨天</text>
			<text id="tday" :class="{active:index==2}">今天</text>
			<text id="mday" :class="{active:index==3}">明天</text>
		</view>
			<yday  v-if="index==1"></yday>
			<tday  v-if="index==2"></tday>
			<mday  v-if="index==3"></mday>
	</view>
</template>

<script>
	import yday from './yesterday.vue'
	import tday from './today.vue'
	import mday from './tormarnone.vue'
	export default {
		data() {
			return {
				id: 0,
				dayList: [],
				index:2
			}
		},
		components: {yday,tday,mday},
		methods: {
			getTarget(e) {
				// console.log(e.target.id);
				if(e.target.id=='yday'){
					this.index=1
				}else if(e.target.id=='tday'){
					this.index=2
				}else if(e.target.id=='mday'){
					this.index=3
				}
			},
			goFood(id) {
				uni.navigateTo({
					url: `/pages/food/food?id=${id}`
				})
			}

		},
		onLoad(options) {

			uni.setNavigationBarTitle({
				title: '一日三餐'
			});
		}
	}
</script>

<style lang="scss">
	.eat {
		width: 93vw;
		padding: 10px 12px;


		.tar-top {
			width: 93vw;
			display: flex;
			text-align: center;
			
			#yday,
			#tday,
			#mday {
				flex: 1;
				padding: 0 10px 10px 10px;
			}
			.active{
				border-bottom:  2px solid red;
				color: red;
			}
		}
		
	}
</style>
